<template>
  <el-dialog 
    title="绘制设置" 
    :visible.sync="dialogVisible" 
    :width="drawType === 1 ? '90%' : '60%'" 
    :before-close="handleClose"
    v-dialogDrag
  >
    <div class="draw-wrapper">
      <!-- 测点分组 -->
      <div class="draw-point-group" v-if="drawType === 1">
        <div class="section-header">
          <div class="title-section">
            <span class="section-title">测点分组</span>
            <el-tag size="small" type="info" style="margin-left: 10px;">共{{ pointGroup.length }}个分组</el-tag>
          </div>
          <el-button 
            type="primary" 
            size="mini" 
            @click="handleAddPointGroup"
          >
            新增分组
          </el-button>
        </div>
        
        <div class="groups-scrollbar" v-if="pointGroup.length">
          <div class="groups-container">
            <div v-for="(item, index) in pointGroup" :key="'point-'+index" class="group-card">
              <div class="card-header">
                <div class="card-title">
                  <i class="el-icon-folder-opened"></i>
                  <span>组{{ index + 1 }}</span>
                </div>
                <div class="card-actions">
                  <el-tooltip effect="dark" content="删除分组" placement="top">
                    <el-button 
                      type="danger" 
                      icon="el-icon-delete" 
                      circle 
                      size="mini"
                      @click="handleRemovePointGroup(index)"
                    ></el-button>
                  </el-tooltip>
                  
                  <el-tooltip effect="dark" content="管理测点" placement="top">
                    <el-popover placement="right" trigger="click" width="320">
                      <div class="points-popover">
                        <div class="popover-header">
                          <i class="el-icon-setting"></i>
                          <span>测点选择</span>
                        </div>
                        <el-checkbox-group v-model="item.selectPoints" @change="handleChangePointPopover($event, index)">
                          <div class="popover-content">
                            <div v-for="p in pointLinkList" :key="p.id" class="point-item">
                              <el-checkbox :label="p.code_ID">
                                <div class="point-info">
                                  <span class="point-name">{{ p.pointName }}</span>
                                </div>
                              </el-checkbox>
                            </div>
                          </div>
                        </el-checkbox-group>
                        <div class="popover-footer">
                          <span>已选择 {{ item.selectPoints.length }} 个测点</span>
                        </div>
                      </div>
                      <el-button 
                        slot="reference" 
                        type="primary" 
                        icon="el-icon-edit" 
                        circle 
                        size="mini"
                      ></el-button>
                    </el-popover>
                  </el-tooltip>
                </div>
              </div>
              
              <div class="card-content">
                <div v-if="item.points.length > 0" class="points-list">
                  <div class="list-header">
                    <span>测点名称</span>
                    <span>排序</span>
                  </div>
                  <div v-for="subItem in item.points" :key="subItem.id" class="point-row">
                    <div class="测点分组">
                      <i class="el-icon-location-information"></i>
                      <span class="point-name">{{ subItem.pointName }}</span>
                    </div>
                    <el-input-number 
                      v-model.number="subItem.index" 
                      size="mini" 
                      controls-position="right"
                      :min="1"
                      :max="100"
                      class="sort-input"
                    ></el-input-number>
                  </div>
                </div>
                <div v-else class="empty-state">
                  <i class="el-icon-document-remove"></i>
                  <p>暂无测点数据</p>
                  <span>点击编辑按钮添加测点至本分组</span>
                </div>
              </div>
              
              <div class="card-footer">
                <span class="point-count">{{ item.points.length }} 个测点</span>
              </div>
            </div>
          </div>
        </div>
        
        <div v-else class="empty-groups">
          <i class="el-icon-folder-add"></i>
          <p>暂无分组数据</p>
          <span>点击上方按钮创建第一个分组</span>
        </div>
        
        <div class="section-footer">
          <el-button type="primary" @click="handleSavePointGroup" size="small" icon="el-icon-check">确认设置</el-button>
        </div>
      </div>
      
      <!-- 分量选择 -->
      <div class="draw-line-group">
        <div class="section-header">
          <div class="title-section">
            <span class="section-title">分量选择</span>
            <el-tag size="small" type="info" style="margin-left:10px;">共{{ compGroup.length }}个分组</el-tag>
          </div>
          <el-button 
            type="primary" 
            size="mini" 
            @click="handleAddCompGroup"
          >
            新增分量组
          </el-button>
        </div>
        
        <div class="comp-groups">
          <el-collapse v-model="activeCollapse" accordion class="custom-collapse">
            <el-collapse-item 
              v-for="(item, index) in compGroup" 
              :key="'comp-'+index" 
              :name="index + 1"
              class="comp-collapse-item"
            >
              <template slot="title">
                <div class="collapse-header"> 
                  <div class="collapse-title">
                   <i class="el-icon-folder-opened"></i>
                    <span>分量组{{ index + 1 }}</span>
                    <el-tag v-if="item.points.length" size="mini" type="success">
                      {{ item.names.length }}个测点
                    </el-tag>
                  </div>
                  <div class="collapse-actions">
                    <el-tooltip effect="dark" content="删除分组" placement="top">
                      <el-button 
                        type="danger" 
                        icon="el-icon-delete" 
                        circle 
                        size="mini"
                        style="width: 28px; height: 28px;margin-top:10px"
                        @click.stop="handleRemoveCompGroup(index)"
                      ></el-button>
                    </el-tooltip>
                    
                    <el-tooltip effect="dark" content="管理测点" placement="top">
                      <el-popover placement="right" trigger="click" width="320">
                        <div class="points-popover">
                          <div class="popover-header">
                            <i class="el-icon-setting"></i>
                            <span>测点选择</span>
                          </div>
                          <el-checkbox-group v-model="item.selectPoints" @change="handleChangeCompPopover($event, index)">
                            <div class="popover-content">
                              <div v-for="p in pointLinkList" :key="p.id" class="point-item">
                                <el-checkbox :label="p.code_ID">
                                  <div class="point-info">
                                    <span class="point-name">{{ p.pointName }}</span>
                                  </div>
                                </el-checkbox>
                              </div>
                            </div>
                          </el-checkbox-group>
                          <div class="popover-footer">
                            <span>已选择 {{ item.selectPoints.length }} 个测点</span>
                          </div>
                        </div>
                        <el-button 
                          slot="reference" 
                          type="primary" 
                          icon="el-icon-edit" 
                          circle 
                          size="mini"
                          @click.native.stop
                        ></el-button>
                      </el-popover>
                    </el-tooltip>
                  </div>
                </div>
              </template>
              
              <div v-if="item.points.length > 0" class="comp-content-wrapper">
                <div class="points-summary">
                  <i class="el-icon-location-information"></i>
                  <span>已选测点：</span>
                  <el-tag 
                    v-for="subItem in item.names" 
                    :key="subItem.code_ID" 
                    size="small"
                    type="info"
                    class="point-tag"
                  >
                    {{ subItem.pointName }}
                  </el-tag>
                </div>
                
                <el-divider></el-divider>
                
                <div class="comp-settings">
                  <div class="settings-header">
                    <span>分量配置</span>
                    <el-tag size="mini">已选 {{ item.selectComps.length }} 个分量</el-tag>
                  </div>
                  
                  <el-checkbox-group v-model="item.selectComps" @change="handleChangeCompSelect($event,index)">
                    <div v-for="(c, cindex) in item.points" :key="cindex" class="comp-setting-card">
                      <div class="comp-main">
                        <el-checkbox :label="c.compid" class="comp-checkbox">
                          <div class="comp-info">
                            <span class="comp-name">{{ c.compname }}</span>
                            <span class="comp-desc">{{ c.comp }}</span>
                          </div>
                        </el-checkbox>
                        
                        <div class="comp-controls">
                          <el-input 
                            v-model="c.compv" 
                            placeholder="请输入" 
                            size="small" 
                            class="comp-value-input"
                            @input="change"
                          />

                          <el-tooltip class="item" effect="dark" content="选择线的颜色" placement="top-start">
                              <el-color-picker 
                                v-model="c.compClolor" 
                                size="small" 
                                class="color-picker"
                                show-alpha
                                :predefine="predefineColors"
                              ></el-color-picker>
                          </el-tooltip>
                          
                          
                        </div>
                      </div>
                      
                      <div class="comp-reference">
                        <div class="reference-type">
                          <el-radio-group v-model="c.v_TP" @change="change">
                            <el-radio :label="1" border>固定值</el-radio>
                            <el-radio :label="2" border>参照值</el-radio>
                          </el-radio-group>
                        </div>
                        
                        <div class="reference-controls">
                          <el-input 
                            v-model="c.vl" 
                            placeholder="请输入" 
                            size="small" 
                            class="reference-input"
                            @input="change"
                          />

                          <el-tooltip class="item" effect="dark" content="选择线的颜色" placement="top-start">
                              <el-color-picker 
                              v-model="c.vlClolor" 
                              size="small" 
                              class="color-picker"
                              show-alpha
                              :predefine="predefineColors"
                            ></el-color-picker>
                          </el-tooltip>
                        </div>
                      </div>
                    </div>
                  </el-checkbox-group>
                </div>
              </div>
              
              <div v-else class="empty-state">
                <i class="el-icon-document-remove"></i>
                <p>暂无分量数据</p>
                <span>点击编辑按钮添加测点至本分组</span>
              </div>
            </el-collapse-item>
          </el-collapse>

          <div v-if="!compGroup.length" class="empty-groups">
          <i class="el-icon-folder-add"></i>
          <p>暂无分量组数据</p>
          <span>点击上方按钮创建第一个分量组</span>
        </div>
        </div>
        
        
        
        <div class="section-footer">
          <el-button type="primary" @click="handleSaveCompGroup" size="small" icon="el-icon-check">确认设置</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {getCOMPByCode_ID} from '@/api/https'
export default {
  name: 'DrawSettingsDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    drawType: {
      type: Number,
      default: 1
    },
    pointLinkList:{
      type:Array,
      default:()=>{
        return []
      }
    },
    pointGroup:{
      type:Array,
      default:()=>{
        return []
      }
    },
    compGroup:{
      type:Array,
      default:()=>{
        return []
      }
    },
    treeID:{
      type:[String,Number],
      default:''
    }
  },
  data() {
    return {
      activeCollapse: 1,
      dialogVisible: this.visible,
      predefineColors: [
        '#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399',
        '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1',
        '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)',
        'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)'
      ]
    };
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
    },
    dialogVisible(newVal) {
      this.$emit('update:visible', newVal);
    },
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.$emit('update:dialogVisible', false);
    },
    handleAddPointGroup() {
      this.pointGroup.push({
        selectPoints: [],
        points: []
      });
    },
    handleRemovePointGroup(index) {
      this.$confirm('确定要删除这个分组吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.pointGroup.splice(index, 1);
        this.$message.success('分组已删除');
      });
    },
    handleChangePointPopover(event, index) {
      this.pointGroup[index].points = this.pointLinkList.filter(
        point => event.includes(point.code_ID)
      ).map((point, i) => ({
        ...point,
        index: i + 1
      }));
    },
    handleSavePointGroup() {
      this.$emit('savePointGroup',this.pointGroup)
    },
    handleAddCompGroup() {
      this.compGroup.push({
        selectPoints: [],
        points: [],
        names: [],
        selectComps: []
      });
    },
    handleRemoveCompGroup(index) {
      this.$confirm('确定要删除这个分量组吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.compGroup.splice(index, 1);
        this.$message.success('分量组已删除');
      });
    },
    handleChangeCompPopover(checked,index) {
      if(checked.length > 0){
            const keyInstR = this.pointLinkList.filter(item => {return item.code_ID == checked[0]})
            const id = keyInstR[0].instR_ID
            const instR = this.pointLinkList.filter(item => {return item.code_ID == checked[checked.length - 1]})
            if(instR[0].instR_ID != id){
                this.$message.error('instR_ID不同，不可以添加进同一分组！')
                checked.splice(checked.length - 1,1)
                return false
            }else{
                getCOMPByCode_ID({
                    pointTreeID:this.treeID,
                    categroy:this.drawType,
                    cGroID:0,
                    codE_IDs:checked
                }).then(res=>{
                    if(res.isSuccess && res.data){
                        if(this.compGroup[index].points && this.compGroup[index].points.length > 0){
                            this.compGroup[index].names = [...res.data.points] || []
                        }else{
                            this.compGroup[index].points = [...res.data.comPs] || []
                            this.compGroup[index].names = [...res.data.points] || []
                        }
                    }
                })
            }
        }else{
            this.compGroup[index].points = []
            this.compGroup[index].names = []
        }
    },

    handleSaveCompGroup() {
      this.$emit('saveCompGroup',this.compGroup)
    },
    change() {
      this.$forceUpdate();
    },
    getRandomColor() {
      const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'];
      return colors[Math.floor(Math.random() * colors.length)];
    },
    handleChangeCompSelect(val,index){     
        let max = 1
        if(this.drawType == 3){
          max = 2
        }
        if(val.length > max){
            val.splice(val.length - 1,1)
            this.$message.warning('已超出最大限制！')
            return false
        }
        this.compGroup[index].points.forEach(item=>{
            item.checked = 0
            val.forEach(v=>{
                if(item.compid == v){
                    item.checked = 1
                }
            })
        })
    },
  }
};
</script>

<style scoped lang="scss">
.draw-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: start;
  padding: 0 5px;
  height: 650px;
  box-sizing: border-box;
  .draw-point-group{
    border:1px solid #f0f0f0;
    padding:10px;
    width:400px;
    box-sizing: border-box;
  }
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 10px 10px 10px;
    border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;
  }
  .section-title {
    font-size: 14px;
    color: #303133;
    font-weight: bold;
  }
  .draw-line-group{
    flex:1;
    margin-left: 10px;
    border:1px solid #f0f0f0;
    padding:10px;
    box-sizing: border-box;
  }
  .groups-scrollbar {
    height: 500px;
    margin-bottom: 20px;
    overflow: auto;
  }
  .comp-groups{
    height: 500px;
    margin-bottom: 20px;
    overflow: auto;
  }
}



.group-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #ebeef5;
  margin-bottom: 10px;
  &:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }
}


.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(90deg, #f7f9fc, #f0f4f9);
  border-bottom: 1px solid #ebeef5;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #409EFF;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.card-content {
  padding: 16px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #ebeef5;
  font-size: 12px;
  color: #909399;
}

.point-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f5f7fa;
}

.point-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.point-name {
  font-weight: 500;
}

.sort-input {
  width: 90px;
}

.card-footer {
  padding: 10px 16px;
  background-color: #fafbfc;
  border-top: 1px solid #ebeef5;
  text-align: right;
}

.point-count {
  font-size: 12px;
  color: #909399;
}

.empty-state, .empty-groups {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #c0c4cc;
  text-align: center;
}

.empty-state i, .empty-groups i {
  font-size: 48px;
  margin-bottom: 12px;
}

.empty-state p, .empty-groups p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #909399;
}

.empty-state span, .empty-groups span {
  font-size: 12px;
}

.section-footer {
  display: flex;
  justify-content: center;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
}

.custom-collapse {
  border: none;
}

.comp-collapse-item {
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #ebeef5;
}

.collapse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding:0 20px;
}

.collapse-title {
  display: flex;
  align-items: center;
  gap:6px;
  font-weight: 600;
}

.collapse-actions {
  display: flex;
  gap: 8px;
}

.comp-content-wrapper {
  padding: 0 16px 16px;
}

.points-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
  padding: 12px;
  background-color: #f7f9fc;
  border-radius: 6px;
  font-size: 14px;
}

.point-tag {
  margin: 2px;
}

.el-divider {
  margin: 16px 0;
}

.comp-settings {
  background: white;
  border-radius: 6px;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-weight: 600;
}

.comp-setting-card {
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  background-color: #fafbfc;
}

.comp-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e6ebf5;
}

.comp-info {
  display: flex;
  flex-direction: column;
}

.comp-name {
  font-weight: 600;
  margin-bottom: 2px;
}

.comp-desc {
  font-size: 12px;
  color: #909399;
}

.comp-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comp-value-input {
  width: 120px;
}

.comp-reference {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reference-type {
  flex: 1;
}

.reference-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reference-input {
  width: 120px;
}

.color-picker {
  vertical-align: middle;
}

.points-popover {
  max-height: 300px;
}

.popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 12px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #ebeef5;
  color: #409EFF;
}

.popover-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 240px;
  overflow-y: auto;
  padding: 5px 0;
}

.point-item {
  padding: 4px 0;
}

.point-info {
  display: flex;
  flex-direction: column;
}

.point-name {
  font-weight: 500;
}

.point-id {
  font-size: 12px;
  color: #909399;
}

.popover-footer {
  padding: 10px 0 0;
  margin-top: 12px;
  border-top: 1px solid #ebeef5;
  text-align: center;
  font-size: 12px;
  color: #909399;
}
.draw-settings-dialog {
  border-radius: 12px;
  overflow: hidden;
}

.draw-settings-dialog .el-dialog__header {
  background: linear-gradient(90deg, #409EFF, #64b5ff);
  padding: 16px 20px;
  border-bottom: none;
}

.draw-settings-dialog .el-dialog__title {
  color: white;
  font-weight: 600;
}

.draw-settings-dialog .el-dialog__headerbtn {
  top: 16px;
}

.draw-settings-dialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
}

.draw-settings-dialog .el-dialog__body {
  padding: 20px;
}

.draw-settings-dialog .el-collapse-item__header {
  padding: 0 16px;
  height: 60px;
  line-height: 60px;
  font-size: 15px;
  background-color: #f7f9fc;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.draw-settings-dialog .el-collapse-item__content {
  padding-bottom: 0;
}
</style>